<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <!--搜索表单-->
    <el-form :inline="true" :model="goods" class="demo-form-inline">
        <el-form-item label="商品名称">
            <el-input v-model="goods.goods_name" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item label="分类">
            <el-select v-model="goods.goods_type" placeholder="分类">
                <el-option label="默认" value="默认"></el-option>
                <el-option label="服饰" value="服饰"></el-option>
                <el-option label="首饰" value="首饰"></el-option>
                <el-option label="数码" value="数码"></el-option>
                <el-option label="文具" value="文具"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="店铺">
            <el-input v-model="goods.goods_dianpu" placeholder="店铺"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <!--按钮-->
    <el-row>
        <el-button type="primary" plain>批量删除</el-button>
        <el-button type="danger" plain  @click="dialogVisible = true">新增</el-button>
    </el-row>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="goods" label-width="80px">
            <el-form-item label="商品名称">
                <el-input v-model="goods.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品类型">
                <el-select v-model="goods.goods_type" placeholder="请选择商品类型">
                    <el-option label="默认" value="默认"></el-option>
                    <el-option label="服饰" value="服饰"></el-option>
                    <el-option label="首饰" value="首饰"></el-option>
                    <el-option label="数码" value="数码"></el-option>
                    <el-option label="文具" value="文具"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品信息">
                <el-input type="textarea" v-model="goods.goods_message"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
                <el-input v-model="goods.price" placeholder="价格"></el-input>
            </el-form-item>
            <el-form-item label="库存" prop="goods_num">
                <el-input v-model.number="goods.goods_num" placeholder="库存"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addgoods">立即创建</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                :row-class-name="tableRowClassName">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="商品上架日期"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="goodsXiaoLiang"
                    label="销量"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="goodsGreat"
                    align="center"
                    label="好评数">
            </el-table-column>
            <el-table-column
                    prop="goodsName"
                    align="center"
                    label="商品名称">
            </el-table-column>
            <el-table-column
                    prop="goodsMessage"
                    align="center"
                    label="商品信息">
            </el-table-column>
            <el-table-column
                    prop="goodsType"
                    align="center"
                    label="商品种类">
            </el-table-column>
            <el-table-column
                    prop="price"
                    align="center"
                    label="商品价格">
            </el-table-column>
            <el-table-column
                    prop="goodsDianPu"
                    align="center"
                    label="店铺名称">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">

                <el-row>
                    <el-button type="primary">修改</el-button>
                    <el-button type="danger">删除</el-button>
                </el-row>
            </el-table-column>
        </el-table>
    </template>
    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
    </el-pagination>
</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el:"#app",

        mounted(){
            //当页面加载完成之后，发布异步请求获取数据

            var _this = this;
            axios({
                method:"get",
                url:"http://localhost:8080/vue-demo/test"
            }).then(function (resp) {
                _this.tableData = resp.data;
            })


        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },//复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;

                console.log(this.multipleSelection);
            },//查询方法
            onSubmit() {
                //console.log(this.goods);

            },
            addgoods() {
                console.log(this.goods);
            },
            //分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },
        data() {
            var checkPrice = (rule, value, callback) => {
                value = parseFloat(value, 10);
                if (value <= 0) {
                    return callback(new Error('价格数目不对劲'));
                }
                else {
                    setTimeout(() => {
                        if (!Number.isFinite(value)) {
                            callback(new Error('必须是数字'));
                        }
                        else {
                            callback();
                        }
                    }, 1000);
                }
            }
            var checkNum = (rule, value, callback) => {
                if (value < 0) {
                    return callback(new Error('库存数目不对劲'));
                }
                else {
                    setTimeout(() => {
                        if (!Number.isInteger(value)) {
                            callback(new Error('必须是整数'));
                        }else {
                            callback();
                        }
                    }, 1000);
                }
            }
                return {
                    currentPage: 4,
                    //搜索表单数据
                    goods: {
                        goodsName: '',
                        goodsType: '',
                        goodsDianPu: '',
                        date: '',
                        goodsMessage: '',
                        goodsGreat: '',
                        goodsXiaoLiang: '',
                        goodsNum:'',
                        price: '',
                    },
                    tableData: [{
                        goodsName: '',
                        goodsType: '',
                        goodsDianPu: '',
                        date: '',
                        goodsMessage: '',
                        goodsGreat: '',
                        goodsXiaoLiang: '',
                        goodsNum:'',
                        price: '',
                    }],

                    rules: {
                        goods_num: [
                            {validator: checkNum, trigger: 'blur'}
                        ],
                        price: [
                            {validator: checkPrice, trigger: 'blur'}
                        ]
                    },
                    //复选框选中数据
                    multipleSelection: [],
                    //展开对话框
                    dialogVisible: false

                }
            }
    })
</script>

</body>
</html>